<template>
  <el-container class="page_container">
    <el-header class="page_header flex" :height="header.height">
      <div
        class="logo flex-shrink0"
        :style="`width:${aside.width};`"
        @click="openPage('/')"
      >
        <span class="icon el-icon-platform-eleme"></span>
        <span class="text">CS_ADMIN</span>
      </div>
      <div class="flex-1 flex justify-between">
        <div class="header_left flex">
          <div class="item" :class="operMenu" @click="menuOperate"></div>
          <div class="item head_menu flex-1">
            <template v-for="(menu, ind) in headNav">
              <div
                :key="ind"
                v-if="menu.isShow == '1'"
                class="item_menu"
                :class="ind == 0 ? 'active' : ''"
              >
                <span :class="menu.menuIcon"></span>{{ menu.menuName }}
              </div>
            </template>
          </div>
        </div>
        <ul class="header_right flex-shrink0">
          <li>{{userInfo.username}}</li>
          <li>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="loginOut">退出</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </el-header>
    <el-container class="page_content">
      <el-aside :width="aside.width" class="page_aside">
        <page-aside :showMenu="showMenu"></page-aside>
      </el-aside>
      <el-container class="page_main flex flex-col">
        <div class="headTab">
          <ul v-if="tabList.length">
            <template v-for="(tab, ind) in tabList">
              <li
                :key="ind"
                :class="tab.active ? 'active' : ''"
                @click="chooseTab(tab)"
              >
                <span>{{ tab.name }}</span>
                <span
                  v-if="ind !== 0"
                  class="icon el-icon-error"
                  @click="closeTab(ind)"
                ></span>
              </li>
            </template>
          </ul>
        </div>
        <el-main>
          <router-view />
        </el-main>
        <el-footer v-if="foot.showFoot" :height="foot.height">底部</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import PageAside from "@/components/pageAside.vue";
export default {
  components: {
    PageAside,
  },
  data() {
    return {
      header: {
        height: "50px",
      },
      aside: {
        width: "240px",
      },
      foot: {
        height: "40px",
        showFoot: false,
      },
      operMenu: "el-icon-s-fold", //el-icon-s-unfold
      showMenu: false,
      headNav: [],
      tabList: [],
      userInfo:{},
      isClick: false,
    };
  },
  created() {
    this.$nextTick(()=>{
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
      this.getMenus();
    })
  },
  watch: {
    $route: {
      handler(val, oldval) {
        console.log(this.isClick);
        const obj = {
          name: val.name || "",
          path: val.path || "/",
          params: val.query || {},
          active: true,
        };
        //这边用来f5刷新跳转首页
        if (!oldval || !oldval.name) {
           this.tabList = [];
          // this.openPage("/");
         
        }
        if (obj.name == "登录" || this.isClick) {
          this.isClick = false;
          return false;
        }
        if (!oldval || !oldval.name || oldval.name == "login") {
          obj.active = true;
        }
        let hasTab = false;
        for (let i in this.tabList) {
          const item = this.tabList[i];
          if (item.name == obj.name) {
            hasTab = true;
            item.active = true;
          } else {
            item.active = false;
          }
        }
        if (!hasTab && obj.name) {
          this.tabList.push(obj);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {

  },
  methods: {
    getMenus(){
      const _this = this;
      this.$request({url:'menuList'}).then(res=>{
        if(res.success){
          _this.headNav = res.data;
        }
      })
    },
    chooseTab(item) {
      if (item.active) {
        return false;
      }
      this.isClick = true;
      this.tabList.filter((v) => {
        v.active = false;
        if (item.name == v.name) {
          v.active = true;
          this.openPage(item.path);
        }
      });
    },
    closeTab(ind) {
      this.isClick = true;
      const tabList = this.tabList;
      const _list = [];
      let _ind = 0;
      let needOpen = false;
      tabList.filter((v, i) => {
        if (i == ind) {
          if (v.active) {
            _ind = ind - 1;
            needOpen = true;
          }
        } else {
          _list.push(v);
        }
      });
      if (needOpen) {
        _list[_ind].active = true;
        this.openPage(_list[_ind].path);
      }

      this.tabList = _list;
    },
    menuOperate() {
      if (this.showMenu) {
        this.showMenu = false;
        this.aside.width = "240px";
        this.operMenu = "el-icon-s-fold";
      } else {
        this.showMenu = true;
        this.aside.width = "64px";
        this.operMenu = "el-icon-s-unfold";
      }
    },
    handleCommand(type) {
      const _this = this;
      if (type == "loginOut") {
        //清空缓存
        localStorage.setItem("token", "");
        _this.openPage("/login");
        // this.$request({url:'logout',method:'GET'}).then(res=>{
        //   if(res.success){
        //      console.log(res.data)
        //   }
        // })
      }
    },
    openPage(url, params = {}) {
      this.$router.push({ path: url, query: params });
    },
  },
};
</script>

<style lang="scss" scoped></style>
